<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加题目</title>
    <link href="${request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="${request.contextPath}/static/css/font-awesome.min.css" rel="stylesheet">
    <link href="${request.contextPath}/static/css/animate.css" rel="stylesheet" type="text/css">
    <link href="${request.contextPath}/static/css/jdGrid/ui.jqgrid.css" rel="stylesheet" type="text/css"/>
    <link href="${request.contextPath}/static/css/style.css" rel="stylesheet">
    <link href="${request.contextPath}/static/css/metroStyle.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript">
        var ctx = "";
        var __cityId = "";
    </script>
</head>
<body class="gray-bg">
<div class="wrapper">
    <div class="row">
        <div class="ibox">
            <div class="ibox-content">
                <form  class="form-horizontal" id="defaultForm" action="/subjectManage/add" method="post" onsubmit="return false;">
                    <div class="form-group">
                        <label class="col-sm-2 control-label"><font color="red">*</font>题目序号</label>
                        <div class="col-sm-10">
                            <input id="serialNumber" name="serialNumber" class="required form-control" type="text" value="" maxlength="50" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">图片</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <input id="questionImageUrl" name="questionImageUrl" type="text" class="form-control">
                                <span class="input-group-btn">
                                                <button type="button" class="btn btn-primary" id="selectImage"
                                                        data-toggle="modal" data-target="#selectImageModal">上传图片</button>
                                    </span>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label"><font color="red">*</font>题目类型</label>
                        <div class="col-sm-10">
                            <select id="questionType" name="questionType" class="form-control " maxlength="50">
                                <option value="1">基础选择题</option>
                                <option value="2">扩展选择题</option>
                                <option value="3">基础必会题</option>
                                <option value="4">扩展进阶题</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group answer">
                        <label class="col-sm-2 control-label"><font color="red">*</font>答案</label>
                        <div class="col-sm-10">
                            <div class="col-sm-10">
                                <input id="answer" name="answer" type="radio" value="A">A
                                <input id="answer" name="answer" type="radio" value="B">B
                                <input id="answer" name="answer" type="radio" value="C">C
                                <input id="answer" name="answer" type="radio" value="D">D
                            </div>
                        </div>
                    </div>

                    <div class="form-group changex" style="display: none">
                        <label class="col-sm-2 control-label"><font color="red">*</font>讲解人</label>
                        <div class="col-sm-10"><input id="videoExplainer"  name="videoExplainer" class="form-control " type="text" value="" maxlength="50" minlength="3"></div>
                    </div>

                    <div class="form-group changex" style="display: none">
                        <label class="col-sm-2 control-label">上传视频</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <input  id="videoUrl" name="videoUrl"  type="text" class="form-control">
                                <span class="input-group-btn">
                                                <button type="button" class="btn btn-primary" id="selectVideo"
                                                        data-toggle="modal" data-target="#selectVideoModal">上传文件</button>
                                        </span>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label"><font color="red">*</font>章节选择</label>
                        <div class="col-sm-10">
                            <select id="chapterId" name="chapterId" class="form-control " maxlength="50">
                                <#if chapters??>
                                    <#list chapters as chapter>
                                        <option value="${chapter.id}">${chapter.chapterName}</option>
                                    </#list>
                                </#if>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label"><font color="red">*</font>排序</label>
                        <div class="col-sm-10">
                            <input id="sort" name="sort" type="text"
                                   class="form-control required " value="" maxlength="50" >
                        </div>
                    </div>

                    <div class="form-group"><label class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-10">
                            <input id="status" name="status" type="radio" value="N" checked>无效
                            <input id="status" name="status" type="radio" value="Y">有效
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10">
                            <textarea id="remark" name="remark" maxlength="200" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <input type="submit" class="btn btn-success" onclick="" value="确定"> <button onclick="cancel()" class="btn btn-primary">取消</button>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script src="${request.contextPath}/static/js/jquery.min.js"></script>
<script src="${request.contextPath}/static/js/bootstrap.min.js"></script>


<script type="text/javascript" src="${request.contextPath}/static/js/plugins/upload/js/diyUpload.js"></script>

<script src="${request.contextPath}/static/ajax/libs/select/select2.js"></script>
<script src="${request.contextPath}/static/js/datePicker/WdatePicker.js"></script>
<script src="${request.contextPath}/static/js/plugins/upload/tookeen.js"></script>

<!-- jquery-validate 表单验证插件 -->
<script src="${request.contextPath}/static/js/validate/jquery.validate.min.js"></script>
<script src="${request.contextPath}/static/js/validate/messages_zh.min.js"></script>
<script src="${request.contextPath}/static/js/validate/jquery.validate.extend.js"></script>
<!-- jquery-form 表单插件 -->
<script src="${request.contextPath}/static/js/jquery.form.min.js" type="text/javascript"></script>
<script src="${request.contextPath}/static/js/layer/layer.min.js"></script>
<script src="${request.contextPath}/static/js/jquery-layout/jquery.layout-latest.js"></script>
<script src="${request.contextPath}/static/js/common-ui.js?v=3.0.0"></script>
<script>
    $("#questionType").change(function(){
        if($(this).val()==1 || $(this).val()==2) {
            $(".changex").css({
                display:"none"
            });
            $(".answer").css({
                display:"block"
            })
        }
        else if($(this).val()==3 || $(this).val()==4){
            $(".changex").css({
                display:"block"
            });
            $(".answer").css({
                display:"none"
            })
        }
    });
    $("#defaultForm").validate({
        rules:{
            // imageUrl:{
            //     required:true
            // },
            serialNumber:{
                required:true
            },
            answer:{
                required:true
            },
            questionType:{
                required:true
            },
            chapterId:{
                required:true
            },
            status:{
                required:true
            },
            sort:{
                required:true
            }
        },
        messages: {
            // "clickType": {
            //     remote: "点击类型不能为空"
            // },
            "serialNumber":{
                remote: "题目序号不能为空"
            },
            "answer":{
                remote: "答案不能为空"
            },
            "status":{
                remote: "状态不能为空"
            },
            "questionType":{
                remote: "题目类型不能为空"
            },
            "chapterId":{
                remote: "章节名称不能为空"
            },
            "sort":{
                remote: "排序不能为空"
            }
        }
    });

    $("#defaultForm").submit(function (e) {
        var serialNumber = $("#serialNumber").val();
        var questionImageUrl = $("#questionImageUrl").val();
        var questionType = $("#questionType option:selected").val();
        var answer = $("input[name='answer']:checked").val();
        var videoExplainer = $("#videoExplainer").val();
        var videoUrl = $("#videoUrl").val();
        var chapterId = $("#chapterId option:selected").val();
        var sort = $("#sort").val();
        var status = $("input[name='status']:checked").val();
        var remark = $("#remark").val();

        $.ajax({
            url:"${request.contextPath}/subjectManage/add",
            type:"GET",
            data:{serialNumber:serialNumber,questionImageUrl:questionImageUrl,questionType:questionType,answer:answer,videoExplainer:videoExplainer,videoUrl:videoUrl,chapterId:chapterId,sort:sort,status:status,remark:remark},
            success:function (data) {
                if(data.code!=null || data.code!=""){
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.$("#hi1").val("1");
                    parent.layer.close(index);//关闭当前页
                }
            }
        });
    })

    $(document).ready(function () {
        $("#selectImage").click(function () {
            openButtonWindow("上传图片", ctx + '/fileUpload/toUploadImage', 600, 400, '完成',setImageUrl);
        });
        $("#selectVideo").click(function () {
            openButtonWindow("上传视频", ctx + '/fileUpload/toUploadVideo', 600, 400, '完成',setVideoUrl);
        });


    });


    function setImageUrl() {
        var imageUrl = $("#questionImageUrl").val();
        if(localStorage.imageUrl){
            if(imageUrl){
                imageUrl += ","+localStorage.imageUrl;
            }else{
                imageUrl= localStorage.imageUrl;
            }
            $("#questionImageUrl").val(imageUrl);
            localStorage.removeItem("imageUrl");
        }
    }

    function setVideoUrl() {

        var videoUrl = $("#videoUrl").val();
        if(localStorage.videoUrl){
            if(videoUrl){
                videoUrl += ","+localStorage.videoUrl;
            }else{
                videoUrl= localStorage.videoUrl;
            }
            $("#videoUrl").val(videoUrl);
            localStorage.removeItem("videoUrl");

        }
    }


</script>
</html>